<template>
  <div class="home">
    <header>
      <van-search v-model="value" placeholder="请输入商品名字搜索" input-align="left" @update:model-value="search" />
    </header>
    <van-tabs v-model:active="active">
      <van-tab :title="item.title" v-for="item in tabList" :key="item.id" />
    </van-tabs>
    <main>
      <List tag="all" v-if="active == 0" ref="getListRef" :name="value" />
      <List tag="classify1" v-else-if="active == 1" ref="getListRef" :name="value" />
      <List tag="classify2" v-else ref="getListRef" :name="value" />
    </main>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref } from 'vue';
import List from "./list.vue"

const router = useRouter()
const active = ref(0);
const getListRef = ref();
const value = ref("")
const tabList = ref([
  { id: 1, title: "全部" },
  { id: 2, title: "类别1" },
  { id: 3, title: "类别2" },
])

const search = (v) => {
  getListRef.value.getList(1, v)
  console.log(v);
}

</script>
<style lang="less" scoped>
.home {
  padding: 10px;
  position: relative;
  background-color: #f7f8fa;

  header {
    margin-bottom: 10px;

    /deep/.van-search {
      background: transparent;
      padding: 0;
      border-radius: 8px;
      overflow: hidden;
    }

    /deep/.van-search__content {
      background-color: #fff;
    }
  }

  /deep/.van-tabs__wrap {
    border-radius: 8px;
  }

  main {
    margin-top: 10px;
    height: calc(100vh - 158px);
    overflow: auto;
  }

}
</style>
